<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        background-size 背景图的尺寸大小
                cover   覆盖
                contain 包含
        background-origin   背景图的填充位置
                padding-box 默认
                border-box
                content-box
        background-clip     背景图的裁切方式
                padding-box 
                border-box  默认
                content-box
    -->
    <!--
        linear-gradient 线性渐变 是值，需要添加到background-image属性上 
            point(如to top 代表从下到上)||angle(0deg是在页面的下边，正值顺时针旋转) 
                color percentage(百分比之内进行渐变，百分比之外纯色)
        radial-gradient 径向渐变 point||angle color percentage
    -->
    <!--
        font-face是css3中的一个模块，他主要是把自己定义的web字体嵌入到你的网页中
            优: 1.可以非常方便的改变大小和颜色
                2.放大后不会失真
                3.减少请求的次数和提高加载速度
                4.简化网页布局
                5.减少设计师和前端工程师的工作量
                6.可使用计算机没有提供的字体
        使用：利用@font-face{font-famile:xxx;src:....} 在其他地方,如p{font-famile:xxx}
                像.woff等文件都是做兼容平台处理的，mac、Linux等 

        自定义生成图标：https://icomoon.io/app/
    -->
    <!--
        文字阴影
        text-shadow: x y blur(模糊值) color 
            阴影的默认颜色是跟文字颜色一样的
            可以通过逗号添加多个阴影
    -->
    <!--
        盒子阴影
        box-shadow: x y blur spread(范围) color inset 多阴影
            盒子阴影的默认颜色是黑色
            默认就是外阴影，如果设置outset不起作用，可选的值只有inset表示内阴影
    -->
    <!--
        mask遮罩 url repeat x y w h 多遮罩
    -->
    <!--
        box-reflect倒影 above below left right 距离 遮罩|渐变(只是针对透明度的渐变，不能支持颜色的渐变)
        利用scale为负值的时候同样可以设置翻转
    -->
    <!--
        blur模糊
            filter:blur()   值越大越模糊
        calc计算
            四则计算        eg：calc(100%-100px)
    -->
    <!--
        分栏布局
        column-count 分栏个数
        column-width 分栏宽度    分栏个数和宽度有冲突，只能选其一
        column-gap   分栏间距
        column-rule  分栏边线
        column-span  合并分栏    要加给子容器
    -->
    <!--
        伪元素本质上是创建了一个有内容的虚拟容器。这个容器不包括任何DOM元素，但是可以包含内容。另外，开发者还可以
            为伪元素定制样式
        ::selection
        ::first-line   /    first-letter
        ::before       /    after
        ....
        伪类是:伪元素是::
    -->
    <!--
        css Hack
        用来解决游览器的兼容性问题，为不同版本的浏览器定制编写不同的css效果，使用每个浏览器单独识别的样式代码，
            控制浏览器的显示样式
        分类：
            css属性前缀法
                在css样式属性名前加一些只有特定浏览器才能识别的hack前缀
                _     IE6
                +、*  IE6、IE7
                \9    IE6、IE7、IE8、IE9    加到值的后面 background:blue\9
                \0    IE8、IE9、IE10、IE11  加到值的后面
            选择器前缀法
                选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定
                    浏览器才能识别的前缀进行hack
                *html       IE6
                *+html      IE7
                :root       IE9以上
            IE条件注释法
                IE浏览器专有的
    -->
    <!--
        IE低版本的常见bug
            透明度      IE8及以下版本不识别  filter:alpha(opacity=50)
            双边距      IE6以下的版本不识别  _display{inline}
            最小高度    IE6以下的版本不识别,最小高为19px  overflow:hidden  
            图片边框    IE8以下的版本不识别  img{border:none}
    -->
    <!--
        渐进增强
            针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能
                达到更好的用户体验
        优雅降级
            一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
    -->
</body>
</html>